<template>
	<tm-sheet v-if="tabsSwiper||(!tabsSwiper&&isShowRender)" :transprent="props.transprent" :color="props.color" :followTheme="props.followTheme"
		:followDark="props.followDark" :dark="props.dark" :round="props.round" :shadow="props.shadow"
		:outlined="props.outlined" :border="props.border" :borderStyle="props.borderStyle"
		:borderDirection="props.borderDirection" :text="props.text" :linear="props.linear"
		:linearDeep="props.linearDeep" :_style="props._style" :_class="props._class" :eventPenetrationEnabled="true"
		:margin="[0, 0]" :padding="[0, 0]" :width="_width" :height="_height">
		<view v-if="sc_top<-30&&reFresh!=0&&!tabsSwiperDisAbledPull" :style="{top:(reFresh==2?-refreshJuli/2:-sc_top-30)+'px',width:_width+'rpx'}" class="zIndex-17  absolute l-0 flex flex-row flex-row-center-center">
			<view class="pr-32" >
				<tm-icon v-if="sc_top>(refreshJuli)&&reFresh!=2" name="tmicon-long-arrow-down"></tm-icon>
				<tm-icon v-if="sc_top<=(refreshJuli)&&reFresh!=2" name="tmicon-long-arrow-up"></tm-icon>
				<tm-icon v-if="reFresh==2" spin name="tmicon-shuaxin"></tm-icon>
			</view>
			<view>
				<tm-text  v-if="sc_top>(refreshJuli)" _class="text-align-center" label="下拉刷新"></tm-text>
				<tm-text  v-if="sc_top<=(refreshJuli)" _class="text-align-center" label="松开立即刷新"></tm-text>
				<tm-text  _class="text-align-center" label="更新于今日8:30"></tm-text>
			</view>
		</view>
		<scroll-view @scrolltolower="onScrollBootom" @scroll="onScroll"  :scroll-y="_height ? true : false" enable-flex class="flex-col"
			:style="[{ width: _width + 'rpx' }, _height ? { height: _height + 'rpx' } : '']">
			
			<view  @touchStart="onScrollStart" @touchend="onScrollEnd" v-if="isShowRender" :style="{transform:`translateY(${reFresh==2?-refreshJuli:0}px)`}" class="flex contentx">
				<slot></slot>
			</view>
		</scroll-view>
	</tm-sheet>

</template>

<script lang="ts" setup>
	/**
	 * 选项卡面板
	 * @description 不可以单独使用，必须放置在tm-tabs组件中使用。
	 */ 
	import tmSheet from "../tm-sheet/tm-sheet.vue";
	import tmTabs from "../tm-tabs/tm-tabs.vue";
	import  tmIcon from "../tm-icon/tm-icon.vue";
	import  tmText from "../tm-text/tm-text.vue";
	import { tabsobj } from "../tm-tabs/interface";
	import {
		Ref,
		ref,
		computed,
		watch,
		onUnmounted,
		inject,
		ComputedRef,
		getCurrentInstance,
		ComponentInternalInstance,
		PropType,
		onMounted
	} from "vue";
	import {
		custom_props
	} from "../../tool/lib/minxs";
	const tabs = ref<InstanceType<typeof tmTabs> | null>(null)
	const proxy = getCurrentInstance()?.proxy??null;
	const props = defineProps({
		...custom_props,
		transprent: {
			type: [Boolean, String],
			default: false,
		},
		color: {
			type: String,
			default: "white",
		},
		//是否显示红点，与count不能同时出现
		dot:{
			type:Boolean,
			default:false
		},
		count:{
			type:[String,Number],
			default:""
		},
		//红点颜色
		dotColor:{
			type:String,
			default:'red'
		},
		name: {
			type: [String, Number],
			default: "",
			required: true
			
		},
		title: {
			type: String,
			default: "",
		},
		icon: {
			type: String,
			default: "",
		},
		pullFun: {
			type: [Function] as PropType < (type: 'top' | 'bottom') => boolean > ,
			default: () => {
				return (type: 'top' | 'bottom') => {
					return true
				}
			}
		}
	});
	
	//---scroll下拉刷新---------
	//0未初始化/松手可能未被触发，没有达到刷新的条件（即被中止了），1下拉手势中还未放开手。2松开手触发下拉刷新，3复位刷新完成
	type reFreshType = 0|1|2|3
	const sc_top = ref(0)
	const refreshJuli = -100;//达到120才能被刷新
	const reFresh:Ref<reFreshType> = ref(0)
	const isyesResh = ref(false) //是否达到了规定刷新条件。
	const isUpToogle = ref(true) //手指是否放开。

	//---------------
	
	const _pname = computed(() => String(props.name))
	//父级方法。
	let parent:any = proxy?.$parent
	while (parent) {
		if (parent?.tmTabsId == 'tmTabsId' || !parent) {
			break;
		} else {
			parent = parent?.$parent ?? null
		}
	}
	
	if (typeof _pname.value != "undefined" && _pname.value != "") {
		parent?.pushKey({
			key: _pname.value,
			title: props.title,
			icon: props.icon,
			dot:props.dot,
			count:props.count,
			dotColor:props.dotColor
		});
		
	}

	const _width = inject(
		"tabsWidth",
		computed(() => 0)
	);
	const _height = inject(
		"tabsheight",
		computed(() => 0)
	);
	const tabsActiveName: ComputedRef < string | number | undefined > = inject(
		"tabsActiveName",
		computed(() => undefined)
	);
	const tabsActiveCacheTabse = inject(
		"tabsActiveCacheTabse",
		computed < Array < tabsobj >> (() => {
			return []
		})
	);
	const tabsSwiper = inject("tabsSwiper",computed(() => false));
	const tabsSwiperIsMoveing = inject("tabsSwiperIsMoveing",computed(() => false));
	const tabsSwiperDisAbledPull = inject("tabsSwiperDisAbledPull", computed(() => true));
		
	const activeIndex = inject("tabsActiveactiveIndex",computed(()=>0))
	// const selfIndex = computed(()=>tabsActiveCacheTabse.value.findIndex(el=>el.key==tabsActiveName.value))
	const selfIndex = computed(()=>tabsActiveCacheTabse.value.findIndex(el=>el.key==_pname.value))

	const isShowRender = computed(()=>{
		if (tabsSwiper.value==false) {
			return selfIndex.value == activeIndex.value;
		}
		return selfIndex.value>=activeIndex.value-1&&selfIndex.value<=activeIndex.value+1;
	})


	watch([() => props.title, () => props.icon,() => props.dot,() => props.dotColor], () => {
		parent?.setTitle({
			key: _pname.value,
			title: props.title,
			icon: props.icon,
			dot:props.dot,
			dotColor:props.dotColor
		});

	});
	onUnmounted(() => {
		parent?.unbindKey(_pname.value);
	});
	
	//=====
	function onScroll(e:any){
		// 切换页面中不允许下拉。
		if(tabsSwiperIsMoveing.value) return
		if(reFresh.value==2&&isUpToogle.value) return;
		if(sc_top.value<=refreshJuli){
			isyesResh.value = true
		}else{
			isyesResh.value = false
		}
		
		sc_top.value = e.detail.scrollTop
		reFresh.value =1;
	}
	function onScrollStart(){
		// 切换页面中不允许下拉。
		if(tabsSwiperIsMoveing.value) return
		isUpToogle.value = false;
	}
	async function onScrollEnd(){
		// 切换页面中不允许下拉。
		if(tabsSwiperIsMoveing.value) return
		isUpToogle.value = true;
		if(reFresh.value ==2) return;
		if(isyesResh.value){
			let p = await funPull('top')
			if (p) {
				reFresh.value = 0;
			} else {
				isUpToogle.value = false
			}
		}else{
			reFresh.value =0;
		}
	}
	async function onScrollBootom(){
		// 切换页面中不允许下拉。
		if(tabsSwiperIsMoveing.value) return
		isUpToogle.value = true;
		if(reFresh.value ==2) return;
		if(isyesResh.value){
			let p = await funPull('bottom')
			if (p) {
				reFresh.value = 0;
			} else {
				isUpToogle.value = false
			}
		}else{
			reFresh.value =0;
		}
		
	}
	async function funPull(type: 'top' | 'bottom') {
		if (typeof props.pullFun === 'function') {
			uni.showLoading({
				title: "...",
				mask: true
			})
			let p = await props.pullFun(type);
			if (typeof p === 'function') {
				p = await p(type);
			}
			uni.hideLoading();
			return p;
		}
	}
</script>

<style scoped>
.contentx{
	transition-duration: 0.5s;
	transition-timing-function: ease;
	transition-delay: 0s;
	transform: translateY(0px);
	transition-property: transform,top;
}
</style>
